<section class="content-header">
    <section class="content-header">
        <h1>
            {{title}}
            <!-- <small>Control panel</small> -->
            <div class="btn-group pull-right">
                <button type="button" class="btn btn-default btn-sm" (click)="exportData()">
                    数据导出
                </button>
            </div>
        </h1>
    </section>
</section>

<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-md-3 col-md-push-9">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">查询区域</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <!-- <div class="form-group">
                        <label>查询类型</label>
                        <label *ngFor="let t of typeList">
                            <input type="radio" class="flat-red" (change)="type=t.id" name="type" [checked]="type===t.id">{{t.name}}
                        </label>
                    </div> -->
                    <div class="form-group">
                        <label for="DateTimeRange">时间</label>
                        <input type="text" class="form-control pull-right" id="DateTimeRange" placeholder="请选择日期" />
                    </div>
                    <div class="form-group">
                        <label>区域</label>
                        <!-- <dx-select-box #subArea style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px"
                            [items]="subAreaItems" displayExpr="subArea" [(selectedItem)]="subAareSelected" [value]="subAreaItems[0]"
                            [searchEnabled]="true">
                        </dx-select-box> -->
                        <dx-drop-down-box #ddda style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px"
                            [(value)]="subAreaSelected" displayExpr="subArea" placeholder="请选择区域" [showClearButton]="true"
                            (onValueChanged)="onSubAreaSelectedChange($event)" [dataSource]="subAreaItems">
                            <dxo-drop-down-options [height]="340"></dxo-drop-down-options>
                            <div *dxTemplate="let data of 'content'">
                                <button type="button" (click)="clearSubAreaSelected()" class="btn btn-default btn-sm"
                                    title="重置">重置</button>&nbsp;&nbsp;&nbsp;
                                <button type="button" (click)="subAreaSelectedOk()" class="btn btn-info btn-sm" title="确定">确定</button>
                                <dx-data-grid [dataSource]="subAreaItems" [hoverStateEnabled]="true" [paging]="{ enabled: true, pageSize: 1000 }"
                                    [filterRow]="{ visible: true }" [(selectedRowKeys)]="subAreaSelected" [scrolling]="{ mode: 'infinite' }"
                                    [height]="265" [showColumnLines]="true" [showRowLines]="true" [showBorders]="true"
                                    [rowAlternationEnabled]="true">
                                    <dxo-selection [selectAllMode]="allPages" [showCheckBoxesMode]="always" mode="multiple"></dxo-selection>
                                    <dxi-column dataField="subArea" caption="区域">
                                    </dxi-column>
                                </dx-data-grid>
                            </div>
                        </dx-drop-down-box>
                    </div>
                    <div class="form-group">
                        <label>设备</label>
                        <dx-drop-down-box #dddb style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [(value)]="equipmentSelected"
                            displayExpr="equipment" placeholder="请选择工位" [showClearButton]="true" [dataSource]="equipemntItems">
                            <dxo-drop-down-options [width]="510" [height]="310"></dxo-drop-down-options>
                            <div *dxTemplate="let data of 'content'">
                                <button type="button" (click)="clearEquipmentSelected()" class="btn btn-default btn-sm" title="重置">重置</button>&nbsp;&nbsp;&nbsp;
                                <button type="button" (click)="equipmentSelectedOk()" class="btn btn-info btn-sm" title="确定">确定</button>
                                <dx-data-grid #ddg [dataSource]="equipemntItems" [hoverStateEnabled]="true" [paging]="{ enabled: true, pageSize: 1000 }"
                                    [filterRow]="{ visible: true }" [(selectedRowKeys)]="equipmentSelected" [scrolling]="{ mode: 'infinite' }"
                                    [height]="265" [showColumnLines]="true" [showRowLines]="true" [showBorders]="true" [rowAlternationEnabled]="true">
                                    <dxo-selection [selectAllMode]="allPages" [showCheckBoxesMode]="always" mode="multiple"></dxo-selection>
                                    <dxi-column dataField="subArea" caption="区域" [width]="100">
                                    </dxi-column>
                                    <dxi-column dataField="equipment" caption="设备" [width]="100">
                                    </dxi-column>
                                    <dxi-column dataField="sectionName" caption="工段名" [width]="100">
                                    </dxi-column>
                                </dx-data-grid>
                            </div>
                        </dx-drop-down-box>
                    </div>
                    <div class="form-group">
                        <label>班次</label>
                        <dx-select-box #shift style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px"
                            [items]="shiftItems" displayExpr="shiftName" [(selectedItem)]="shiftSelected" [value]="shiftItems[0]"
                            [searchEnabled]="true">
                        </dx-select-box>
                    </div>
                </div>
                <div class="box-footer">
                    <button type="button" class="btn btn-primary" (click)="getReportData()"> 查 询 </button>
                </div>
            </div>
        </div>
        <div class="col-md-9 col-md-pull-3">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">故障/停机时间分析</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div echarts [options]="faultChartOption" (chartInit)="onChartInit('故障/停机时间分析',$event)" class="demo-chart"
                        style="height:300px;width:100%;"></div>
                </div>
            </div>
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">故障/停机时间（TOP3）</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-info btn-sm" data-toggle="tooltip" (click)="saveTimeAnalyse()"
                            title="保存更改">
                            <i class="fa fa-save"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <dx-data-grid [dataSource]="faultTopList" [showColumnLines]="true" [showRowLines]="true"
                        [showBorders]="true" [rowAlternationEnabled]="true" (onExporting)="onExporting($event)" [columnMinWidth]="50" [columnAutoWidth]="true">
                        <dxo-editing mode="cell" [allowUpdating]="true">
                        </dxo-editing>
                        <dxo-export [enabled]="true" fileName="故障/停机时间（TOP3）" [allowExportSelectedData]="false"></dxo-export>
                        <dxi-column dataField="duration" caption="故障时间(分)">
                        </dxi-column>
                        <dxi-column dataField="station" caption="工位号">
                        </dxi-column>
                        <dxi-column [allowEditing]="true" dataField="reason" caption="原因">
                        </dxi-column>
                        <dxi-column [allowEditing]="true" dataField="solveWay" caption="措施">
                        </dxi-column>
                        <dxi-column [allowEditing]="true" dataField="resUser" caption="责任人">
                        </dxi-column>
                        <!-- <dxi-column [allowEditing]="false" dataField="计划完成时间" [allowFiltering]="false" [allowSorting]="false" cellTemplate="cellTemplate"></dxi-column>
                        <div *dxTemplate="let data of 'cellTemplate'">
                            <input class="btn btn-danger" [id]="data.data.station" value="计划完成时间">
                        </div> -->
                        <dxi-column [allowEditing]="true" dataField="targetTime" caption="计划完成时间">
                        </dxi-column>
                        <dxi-column [allowEditing]="true" dataField="completeTime" caption="实际完成时间">
                        </dxi-column>
                        <dxi-column [allowEditing]="true" dataField="status" caption="状态">
                        </dxi-column>
                        <dxi-column [allowEditing]="true" dataField="resultStatus" caption="改进效果">
                        </dxi-column>
                    </dx-data-grid>
                </div>
            </div>
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">呼叫次数分析</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div echarts [options]="assistChartOption" (chartInit)="onChartInit('呼叫次数分析',$event)" class="demo-chart"
                        style="height:300px;width:100%;"></div>
                </div>
            </div>
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">呼叫次数（TOP3）</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-info btn-sm" (click)="saveCountAnalyse()" data-toggle="tooltip"
                            title="保存更改">
                            <i class="fa fa-save"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <dx-data-grid [dataSource]="assistTopList" [showColumnLines]="true" [showRowLines]="true"
                        [showBorders]="true" [rowAlternationEnabled]="true" (onExporting)="onExporting($event)" [columnMinWidth]="50" [columnAutoWidth]="true">
                        <dxo-export [enabled]="true" fileName="呼叫次数（TOP3）" [allowExportSelectedData]="false"></dxo-export>
                        <dxo-editing mode="cell" [allowUpdating]="true">
                        </dxo-editing>
                        <dxi-column dataField="count" caption="呼叫次数">
                        </dxi-column>
                        <dxi-column dataField="operationNo" caption="岗位">
                        </dxi-column>
                        <dxi-column [allowEditing]="true" dataField="reason" caption="原因">
                        </dxi-column>
                        <dxi-column [allowEditing]="true" dataField="solveWay" caption="措施">
                        </dxi-column>
                        <dxi-column [allowEditing]="true" dataField="resUser" caption="责任人">
                        </dxi-column>
                        <dxi-column [allowEditing]="true" dataField="targetTime" caption="计划完成时间">
                        </dxi-column>
                        <dxi-column [allowEditing]="true" dataField="completeTime" caption="实际完成时间">
                        </dxi-column>
                        <dxi-column [allowEditing]="true" dataField="status" caption="状态">
                        </dxi-column>
                        <dxi-column [allowEditing]="true" dataField="resultStatus" caption="改进效果">
                        </dxi-column>
                    </dx-data-grid>
                </div>
            </div>

        </div>

        <div class="col-md-12">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">故障数据</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <dx-data-grid [dataSource]="faultList" [showColumnLines]="true" [showRowLines]="true" [showBorders]="true"
                        [rowAlternationEnabled]="true" (onExporting)="onExporting($event)"  [columnMinWidth]="50" [columnAutoWidth]="true">
                        <dxo-paging [pageSize]="10"></dxo-paging>
                        <dxo-export [enabled]="true" fileName="故障数据" [allowExportSelectedData]="false"></dxo-export>
                        <dxo-pager [showPageSizeSelector]="true" [allowedPageSizes]="[10, 20, 100]" [showInfo]="true">
                        </dxo-pager>
                        <dxi-column dataField="subArea" caption="生产线">
                        </dxi-column>
                        <dxi-column dataField="station" caption="工位/设备">
                        </dxi-column>
                        <dxi-column dataField="shfitDay" caption="日期">
                        </dxi-column>
                        <dxi-column dataField="shiftId" caption="班次">
                        </dxi-column>
                        <dxi-column dataField="startTime" caption="故障开始时间">
                        </dxi-column>
                        <dxi-column dataField="endTime" caption="故障结束时间">
                        </dxi-column>
                        <dxi-column dataField="duration" caption="持续时间(秒)">
                        </dxi-column>
                        <dxi-column dataField="code" caption="故障代码">
                        </dxi-column>
                        <dxi-column dataField="faultWordDescription" caption="代码解释">
                        </dxi-column>
                    </dx-data-grid>
                </div>
            </div>
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">Andon呼叫数据</h3>
                    <div class="box-tools pull-right">
                            <button type="button" (click)="saveChanges()" class="btn btn-info btn-sm" data-toggle="tooltip" title="保存">
                                    <i class="fa fa-save"></i>
                                </button>
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <dx-data-grid [dataSource]="assistList" [showColumnLines]="true" [showRowLines]="true"
                    (onRowUpdated)="onUpdateAssistRow($event)" 
                        [showBorders]="true" [rowAlternationEnabled]="true" (onExporting)="onExporting($event)">
                        <dxo-paging [pageSize]="10"></dxo-paging>
                        <dxo-editing mode="cell" [allowUpdating]="true"></dxo-editing>
                        <dxo-export [enabled]="true" fileName="Andon呼叫数据" [allowExportSelectedData]="false"></dxo-export>
                        <dxo-pager [showPageSizeSelector]="true" [allowedPageSizes]="[10, 20, 100]" [showInfo]="true">
                        </dxo-pager>
                        <dxi-column [allowEditing]="false" dataField="subArea" caption="生产线" [width]="80">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="equipment" caption="工位/设备" [width]="90">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="shiftDay" caption="日期" [width]="100">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="shiftId" caption="班次" [width]="60">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="startTime" caption="呼叫开始时间" [width]="150">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="endTime" caption="呼叫结束时间" [width]="150">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="intervalTime" caption="持续时间(秒)" [width]="100">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="callType" caption="呼叫类型" [width]="80">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="operationNo" caption="岗位" [width]="80">
                        </dxi-column>
                        <dxi-column [allowEditing]="true" dataField="reportFilter" caption="TPM" [width]="60">
                            <dxo-lookup [dataSource]="tpmItems" displayExpr="text" valueExpr="id">
                            </dxo-lookup>
                        </dxi-column>
                        <dxi-column [allowEditing]="true" dataField="reason" caption="呼叫原因">
                        </dxi-column>
                        <dxi-column [allowEditing]="true" dataField="measure" caption="措施">
                        </dxi-column>
                    </dx-data-grid>
                </div>
            </div>
        </div>
    </div>
</section>